<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>收入报告</title>
		
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../fonts/iconfont.css" />
		<link rel="stylesheet" type="text/css" href="../css/timecheck.css" />
		<script>
      var width =window.localStorage.getItem('width');
      document.documentElement.style.fontSize =  width ? width/6.4+  'px' :'55px';
		</script>
		<script src="../config.js"></script>
		<style>
			html,
			body,
			#app {
				width: 100%;
				/*height: 100%;*/
				overflow-x: hidden;
			}
			
			.income-each-box {
				box-sizing: content-box;
				margin-top: 0.1rem;
				background-color: #fff;
				height: 1.2rem;
				padding: 0.2rem 0;
				overflow-x: scroll;
				overflow-y: hidden;
				white-space: nowrap;
			}
			
			.income-each {
				width: 20%;
				border-right: 1px solid #C9C9C9;
				/*float: left;*/
				display: inline-block;
				box-sizing: border-box;
				text-align: center;
				color: #000000;
			}
			
			.income-each p {
				color: #000000;
				font-size: 0.24rem;
			}
			
			.income-each p:nth-of-type(1) {
				margin-top: 0.1rem;
				font-weight: bold;
			}
			
			.income-each:nth-last-of-type(1) {
				border-right: 0;
			}
			/**/
			
			.division {
				display: flex;
				margin: 15px 0 5px;
			}
			
			.line {
				flex: 2;
				text-align: center;
			}
			
			.line span {
				display: inline-block;
				width: 70%;
				height: 1px;
				background-color: #ccc;
				vertical-align: middle;
			}
			
			.division-word {
				flex: 1;
				text-align: center;
				font-size: 0.24rem;
			}
			/**/
			
			.table-box {
				width: 100%;
				overflow-x: scroll;
			}
			
			.table-box::-webkit-scrollbar {
				display: none;
			}
			
			table,
			tbody {
				width: 100%;
				text-align: center;
				font-size: 0.2rem;
			}
			
			table tbody tr {
				width: 100%;
			}
			
			table,
			tbody,
			td {
				text-align: center;
			}
			
			table {
				font-size: 0.24rem;
				width: 100% !important;
				/*table-layout: fixed;*/
			}
			
			.tab-head {
				background-color: #FFFFFF;
				line-height: 0.5rem;
				font-size: 0.22rem;
				width: 100%;
			}
			
			.tab-head div {
				float: left;
				text-align: center;
			}
			
			table tr td {
				padding: 0.1rem 0;
				height: 0.8rem;
			}
			
			.tdname {
				/*text-align: left;*/
			}
			
			.bglight {
				background-color: #FFFFFF;
			}
			
			.nodata td {
				text-align: center;
				line-height: 4.8rem;
				color: #555555;
			}
			/**/
			
			.mui-bar-tab .mui-tab-item.mui-active {
				color: #ff6600;
			}
			
			.light {
				color: #8e8a8a;
			}
			
			.fixed {
				position: fixed;
				top: 1.15rem;
				border-top: 1px solid #ccc;
				border-bottom: 1px solid #ccc;
				z-index: 9999999;
			}
			
			.clear {
				margin-top: 0.48rem;
			}
			.isWH{
				display: inline-block;
				width: 4px;
				height: 4px;
				border-radius: 50%;
				background-color:green;
				margin-bottom: 2px;
			}
		</style>
	</head>

	<script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script>
	<script src="../js/mui.min.js"></script>
	<script src="../common/timeCheck.js" type="text/javascript" charset="utf-8"></script>
	<body>
		<div id="app" class="mui-content">
			<time-check :type='1' :dateType="dateType" :totalnum='(totalData.totalIncome/100).toFixed(2)' :realnum="(totalData.totalIncome/100-totalData.diamondIncome/10- (totalData.recharge ? totalData.recharge/10 : 0)).toFixed(2)" :actnum="actnum" :fromdate="fromDate" :todate='toDate' :top="top"></time-check>
			<div class="income-each-box mui-clearfix">
				<div class="income-each">
					<p>现金</p>
					<p>{{(totalData.cashIncome/100).toFixed(2)}}</p>
				</div>
				<div class="income-each">
					<p>微信</p>
					<p>{{(totalData.weixinIncome/100).toFixed(2)}}</p>
				</div>
        <div class="income-each">
          <p>美团</p>
          <p>{{(totalData.meituanAmount/100).toFixed(2)}}</p>
        </div>
        <div class="income-each">
          <p>收钱吧</p>
          <p>{{(totalData.shouQianBa/100).toFixed(2)}}</p>
        </div>
        <div class="income-each">
          <p>黄钻</p>
          <p>{{(totalData.diamond/100).toFixed(2)}}</p>
        </div>
        <div class="income-each">
          <p>蓝钻</p>
          <p>{{(totalData.bindDiamond/100).toFixed(2)}}</p>
        </div>
				<div class="income-each">
					<p>支付宝</p>
					<p>{{(totalData.alipayIncome/100).toFixed(2)}}</p>
				</div>
				<div class="income-each">
					<p>POS机</p>
					<p>{{(totalData.bankIncome/100).toFixed(2)}}</p>
				</div>

				<!--<div class="income-each">-->
					<!--<p>耗钻</p>-->
					<!--<p>{{(totalData.diamondIncome/10).toFixed(2)}}</p>-->
				<!--</div>-->
			</div>
			<!---->
			<div class="division flex">
				<div class="line"><span></span></div>
				<div class="division-word">
					收入排名
				</div>
				<div class="line"><span></span></div>
			</div>
			<div class="table-box">
				<div class="tab-head mui-clearfix" :class="isFixed === true ? 'fixed':''">
					<div style="width: 10%;">排行</div>
					<div style="width: 24%;">门店名</div>
					<div style="width: 19%;" class="light">设备数</div>
					<div style="width: 22%;">销售额</div>
					<div style="width: 25%;" class="light">本店实收</div>
				</div>
				<table :class="isFixed === true ? 'clear':''">
					<tbody>
						<tr v-show="totalData.stores.length !==0" v-for="(item,index) in totalData.stores" :key='index' :class="{bglight:index%2===1}" @click="toshop(index)">
							<td style="width: 10%;">{{index*1+1}}</td>
							<td  style="width: 24%;">
								<span v-show="item.storeType === 2" class='isWH'> </span>
								<span>{{item.storeName}}</span>
							</td>
							<td style="width: 19%;" class="light">{{item.deviceNum ? item.deviceNum+'台' : '--' }}</td>
							<td style="width: 22%;">{{(item.totalIncome/100).toFixed(2)}}</td>
							<!--recharge  门店 耗钻-->
							<td style="width:25%;" class="light">{{(item.totalIncome/100-item.recharge/10-item.atmDiamond/10 ).toFixed(2)}}</td>
						</tr>
					</tbody>
				</table>
				<p v-show="totalData.stores.length ===0 " style="width: 100%;text-align: center;height: 0.5rem;line-height: 0.8rem">
					暂无数据
				</p>
			</div>
			<!---->
		</div>
		<!---->
		<!---->

		<script type="text/javascript">
			var vm = new Vue({
				el: '#app',
				data: function() {
					return {
						currentShopObj: {},
						fromDate: '',
						toDate: '',
						pageId: '',
						actnum: 0,
						totalData: {
							totalIncome: 0,
							cashIncome: 0,
							weixinIncome: 0,
							alipayIncome: 0,
							bankIncome: 0,
							diamondIncome: 0,
              diamond: 0,
              bindDiamond: 0,
              shouQianBa: 0,
							stores: [
//								{
//                  "storeId":85,
//                  "storeName":"数据测试门店1",
//                  "totalIncome":198100,
//                  "deviceNum":33,
//                  "atmCash":0,
//                  "atmWeixin":0,
//                  "atmDiamond":0,
//                  "recharge":40,
//                  "cardCash":28300,
//                  "cardWeixin":136000,
//                  "cardBank":20000,
//                  "cardAlipay":13200,
//                  "cardMeituanAmount":200,
//                  "dailyIncome":[],
//                  storeType:1
//								}
							],
						},
						dateType: '',
						isFixed: false,
						top: '1rem'
					}
				},
				created: function() {
					var vm = this
					mui.init();
					mui.plusReady(function() {
						vm.receiveParams()
						vm.initTime()
					})
				},
				mounted: function() {
					this.setTable();
					window.addEventListener('scroll', this.handleScroll)
				},
				methods: {
					receiveParams: function() {
						var self = plus.webview.currentWebview();
						this.currentShopObj = self.currentShopObj;
						this.pageId = self.pageId;

					},
					initTime: function() {
						this.date = new Date()
						//            var weekday = this.date.getDay();//0:周日，1-6：周一到周六         默认时间为周
						//            if(weekday === 0) weekday = 7;
						//            var startTime=new Date().getTime() - (24*60*60*1000)*(weekday-1);
						//            this.fromDate=new Date(startTime).format('yyyy-MM-dd')
						//            this.toDate = new Date(this.date).format('yyyy-MM-dd')

						//						默认时间为日
						this.fromDate = new Date(this.date).format('yyyy-MM-dd')
						this.toDate = new Date(this.date).format('yyyy-MM-dd')
					},
					setTable: function() {
						var wid = document.querySelector('.tab-head').clientWidth
						//						document.querySelector('.nodata td').style.width = wid + 'px'
					},
					loadData: function() {
						var vm = this;
		
						config.ajax({
							url: config.basePath + '/phone/income',
							data: {
								fromDate: new Date(vm.fromDate).format('yyyyMMdd'),
								toDate: new Date(vm.toDate).format('yyyyMMdd'),
								pageId: vm.pageId
							},
							success: function(res) {
							  console.log('data success')
							  console.log(JSON.stringify(res))
								if(res.result === 1) {
									vm.totalData = res.data;
								} else {
									mui.toast(res.errormsg)
								}
							},
						})
					},
					toshop: function(index) {
						var vm = this
						var storeId = vm.totalData.stores[index].storeId
						var storeName = vm.totalData.stores[index].storeName
						console.log( JSON.stringify(vm.totalData.stores[index]))
						var url ='', id='';
//						storeType  1.普通店 2.网红店
						if(vm.totalData.stores[index].storeType === 2){
              url='./netHongDian/incomeDetail.html';
              id='incomeDetail'
						}else if(vm.totalData.stores[index].storeType === 1){
              url='./incomeItem.html';
              id='incomeItem'
						}
						mui.openWindow({
//							url: './incomeItem.html',
//							id: 'incomeItem',
							url: url,
							id: id,
							styles: {
								titleNView: {
									titleText: storeName,
									titleColor: "#FFFFFF",
									titleSize: "17px",
									backgroundColor: "#FF6800",
									autoBackButton: true,
									buttons: [{
										fontWeight: 'normal',
										fontSize: '18px',
										float: 'right',
										fontSrc: "_www/fonts/iconfont.ttf", //wap2app内置字体文件
										text: "\ue602",
										onclick: function() {
											var allPage = plus.webview.all()
											var nowPage = plus.webview.getWebviewById('index')
											for(var i = 0; i < allPage.length; i++) {
												if(allPage[i].getURL() !== nowPage.getURL()) {
													plus.webview.close(allPage[i]);
												}
											}
										}
									}],
									splitLine: {
										color: "#CCCCCC",
										height: "1px"
									}
								}
							},
							extras: {
								currentShopObj: vm.currentShopObj,
								storeId: storeId,
								storeName: storeName,
								fromDate: vm.fromDate,
								toDate: vm.toDate,
								actnum: vm.actnum,
								dateType: vm.dateType,
							}
						});
					},
					handleScroll: function() {
						var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
						if(scrollTop > 220) {
							vm.isFixed = true;
							vm.top = '1.65rem'
						} else {
							vm.isFixed = false;
							vm.top = '1.18rem'
						}
					}
				},
				watch: {
					fromDate: function() {
						this.loadData()
					}
				}
			})
		</script>
	</body>

</html>